<!--The content below is only a placeholder and can be replaced.-->
<header ng-controller="header" id="headerdiv" ng-show="isShowHeader" class="ng-scope">
    <div class="row" id="menusDT">
        <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top circle menudtcls ng-scope" ng-controller="header" role="navigation">
            <div class="row nav-margin">
                <div class="container-fluid container-fluid-width">
                    <div class="navbar-header" style="margin-left: 15px;">
                        <a ng-click="logodir()" style="cursor:pointer;">
                            <img src="/assets/images/SingX_logo_edited.png" class="img-responsive logoalignment" title="SingX Logo" alt="SingX Logo">
                        </a>
                    </div>
                    <div class="menubgcolor active">
                        <ul class="nav navbar-nav"></ul>
                        <ul class="nav navbar-nav navbar-right showvisiblecls font-face-bold in">
                            <li class="dropdown active" ng-show="isShow('SignUp')">
                                <a class="dropdown-toggle no-border ng-binding" data-toggle="dropdown" href="#">Singapore <span class="caret"></span></a>
                                <ul class="dropdown-content dropdown-menu themebgcolor in" style="color: #FFFFFF;right:auto;left:0;">
                                    <li></li>
                                    <li>
                                        <a ng-click="changeDomain('Hong Kong')" onclick="closeCarousel();ga('send', 'event', 'Click Hong Kong', 'Click', 'Click Hong Kong');" ng-if="domain !== 'Hong Kong'" class="ng-scope active">Hong Kong</a><!-- end ngIf: domain !== 'Hong Kong' -->
                                    </li>
                                    <li>
                                        <a ng-click="changeDomain('Australia')" onclick="closeCarousel();ga('send', 'event', 'Click Australia', 'Click', 'Click Australia');" ng-if="domain !== 'Australia'" class="ng-scope active">Australia</a><!-- end ngIf: domain !== 'Australia' -->
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown" ng-show="isShow('SignUp')">
                                <a href="/singx" class="dropdown-toggle no-border active" data-toggle="modal">Home</a>
                            </li>
                            <li class="dropdown active" ng-show="isShow('SignUp')">
                                <a class="dropdown-toggle no-border" data-toggle="dropdown" href="#">Solutions <span class="caret"></span></a>
                                <ul class="dropdown-content dropdown-menu themebgcolor in" style="color: #FFFFFF;right:auto;left:0;">
                                    <li></li>
                                    <li>
                                        <a href="#" onclick="closeCarousel();ga('send', 'event', 'Click Biz Tab', 'Click', 'Click Biz Tab');" ng-if="!isBizTab || isEduTab" class="ng-scope">Business</a><!-- end ngIf: !isBizTab || isEduTab -->
                                    </li>
                                    <li>
                                        <a href="#" onclick="closeCarousel();ga('send', 'event', 'Click Education Tab', 'Click', 'Click Education Tab');" ng-if="!isEduTab" class="ng-scope">Education</a><!-- end ngIf: !isEduTab -->
                                    </li>
                                    <li class="dropdown" ng-show="isShow('SignUp')"><a class="dropdown-toggle no-border active" data-toggle="modal" ng-click="openCurrencyAlert()">Set Rate Alerts</a></li>
                                </ul>
                            </li>
                            <li class="dropdown" ng-show="isShow('SignUp')"><a class="dropdown-toggle no-border" href="/singx/MobileTopups/NewTopup" style="padding-bottom: 0px;">Global Mobile Top-ups</a></li>
                            <li class="dropdown" ng-show="isShow('SignUp')"><a class="dropdown-toggle no-border active" data-toggle="modal" ng-click="openSignup()" onclick="ga('send', 'event', 'Sign up button', 'Click', 'Click Sign Up');ga('send','pageview','/SignUp1');fbq('trackCustom', 'Click Sign Up Button');"> Signup </a></li>
                            <li class="dropdown" ng-show="isShow('Login')"> <a class="dropdown-toggle no-border loginbgcolor active" ng-click="openLogin()" onclick="ga('send', 'event', 'Login button', 'Click', 'Click Login');" data-toggle="modal">Login</a> </li>
                            <li class="active ng-hide" ng-show="isShow('DashBoard')"><a class="dropdown-toggle no-border active" ng-click="openNavBarLinks('DashBoard')" data-toggle="modal" data-target="">&nbsp;&nbsp;&nbsp;DashBoard </a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right customer-actions ng-hide in" ng-show="isShow('Profile')">
                            <li class="dropdown active">
                                <a class="ng-binding active">My Account <span class="caret"></span> </a>
                                <ul class="dropdown-content dropdown-menu themebgcolor mobilesubmenucls in">
                                    <li class="disable_animation diableanimation1">
                                        <a href="#" ng-click="profile()" class="active"><img src="/assets/images/profile.png" class="submenu_alignright">Profile</a>
                                    </li>
                                    <li class="disable_animation diableanimation2">
                                        <a href="#" ng-click="account()" class="active"><img src="/assets/images/account.png" class="submenu_alignright">Change password</a>
                                    </li>
                                    <li class="disable_animation diableanimation2">
                                        <a href="#" ng-click="openCurrencyAlert()" class="active"><img src="/assets/images/bell_icon.png" width="24" height="24" class="submenu_alignright">Rate Alerts</a>
                                    </li>
                                    <li class="disable_animation diableanimation2">
                                        <a href="#" ng-click="logout()" class="active"><img src="/assets/images/logoutnew.png" width="27" class="submenu_alignright">Log out</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>
<div class="row templatealign">
    <!-- ngView:  -->
    <div ng-view="" autoscroll="true" class="ng-scope">
        <div class="container-fluid bt-padzero ng-scope" data-ng-init="initMtopup()">
            <div class="row bt">
                <!-- Bootstrap Navigation start -->
                <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar left-pane"
                     style="margin-top:0px;">
                    <ul class="nav nav-pills flex-column sidebar-left">
                        <li class="nav-item user"><a class="nav-link  bg-class ng-binding">undefined </a></li>
                        <li class="nav-item profile"><a class="nav-link">Edit Profile</a>
                        </li>
                        <li class="nav-item manage"><a class="nav-link">Manage Receiver Accounts</a></li>
                        <li class="nav-item account"><a class="nav-link">Manage Sender Accounts</a></li>
                        <li class="nav-item mtopup"><a class="nav-link">Global Mobile Top-ups</a></li>
                        <li class="nav-item statement"><a class="nav-link">View My Statement</a></li>
                        <li class="nav-item notificationicon"><a class="nav-link">Set Rate Alerts</a></li>
                    </ul>
                </nav>
                <!--Bootstrap Navigation End-->
                <div class="col-sm-9 bt-padzero">
                    <div class="main mainpagealign">
                        <ul class="nav nav-tabs mtopupNav" id="myTab" role="tablist">
                            <li class="nav-item"><a class="nav-link active selectedNav" id="newTopup"
                                   data-toggle="tab" role="tab" aria-controls="newTopup"
                                   aria-selected="true">New Bill Payment</a></li>
                            <li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab"
                                   role="tab" aria-controls="topupHistory" aria-selected="false">Past Transactions</a>
                            </li>
                            <li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab"
                                   role="tab" aria-controls="about" aria-selected="false">About</a></li>
                        </ul>
                        <br>
                        <div class="container aligncontentleft">
                            <form class="ng-pristine ng-valid ng-valid-maxlength">
                                <h3>New Bill Payment</h3>
                                <div class="row">
                                    <div class="col-sm-6 col-md-6 col-xs-12">
                                        <div class="form-group">
                                            <p> Recipient Country </p>
                                            <label class="sr-only" for="mobNo">India</label>
                                            <div class="input-group">
                                                <div class="select-style width65 ">
                                                    <input type="text"
                                                           class="input-lg phoneInput ng-pristine ng-untouched ng-valid ng-valid-maxlength"
                                                           id="mobNo" placeholder="India" ng-model="destNo"
                                                           ng-keypress="filterValue($event)" maxlength="12">
                                                    <p class="invalidtext ng-binding"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-6 col-xs-12">
                                        <div class="form-group">
                                            <p> Billing CategorySelect </p>
                                            <div class="select-style width65 ">
                                                <select
                                                        ng-options="x as x.countryName for x in countries track by x.countryName"
                                                        ng-change="findOperators(selectedCountry)"
                                                        ng-model="selectedCountry"
                                                        class="ng-pristine ng-untouched ng-valid">
                                                    <option value="" disabled="" selected="selected"> Select</option>
                                                    <option value="Broadband" label="Broadband">Broadband </option>
                                                    <option value="Cable" label="Cable">Cable</option>
                                                    <option value="Challan" label="Challan">Challan</option>
                                                    <option value="Credit Card Bill Pay"
                                                            label="Credit Card Bill Pay">Credit Card Bill Pay </option>
                                                    <option value="Data Card" label="Data Card">Data Card </option>
                                                    <option value="Digital Vouche" label="Digital Vouche"> Digital Vouche</option>
                                                    <option value="DTH" label="DTH">DTH</option>
                                                    <option value="Electricity" label="Electricity">Electricity </option>
                                                    <option value="EMI" label="EMI">EMI</option>
                                                    <option value="Gas" label="Gas">Gas</option>
                                                    <option value="Housing" label="Housing">Housing</option>
                                                    <option value="Insurance" label="Insurance">Insurance </option>
                                                    <option value="Landline" label="Landline">Landline</option>
                                                    <option value="Metro" label="Metro">Metro</option>
                                                    <option value="MetroMunicipal Corporation"
                                                            label="MetroMunicipal Corporation">MetroMunicipal Corporation</option>
                                                    <option value="Postpaid" label="Postpaid"> Postpaid </option>
                                                    <option value="Water" label="Water">Water</option>
                                                    <option value="Wifi" label="Wifi"> Wifi</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-6 col-xs-12">
                                        <div class="form-group">
                                            <br>
                                            <p>Billing CategorySelect</p>
                                            <div class="select-style width65 ">
                                                <select
                                                        ng-options="x as x.operatorName for x in operators track by x.airtimeOperatorId"
                                                        ng-change="updateOperator(selectedOperator)"
                                                        ng-model="selectedOperator" placeholder="Select"
                                                        class="ng-pristine ng-valid ng-touched">
                                                    <option value="" disabled="" selected="selected"> Select</option>
                                                </select>
                                            </div>
                                            <p class="invalidtext ng-binding"></p>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-6 col-xs-12">
                                        <div class="form-group">
                                            <br>
                                            <p>State</p>
                                            <div class="select-style width65 ">
                                                <select placeholder="Select"
                                                        class="ng-pristine ng-valid ng-touched">
                                                    <option value="" disabled="" selected="selected"> Select</option>
                                                </select>
                                            </div>
                                            <p class="invalidtext ng-binding"></p>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-6 col-xs-12">
                                        <div class="form-group">
                                            <br>
                                            <p>Consumer Number<a data-toggle="tooltip"
                                                   title="Click here to see where you canfind the consumer number forvarious billing organisations"><img
                                                         src="./images/Big_Questionmark.png" style="cursor: pointer;margin-left: 5px;
                                                                margin-top: -5px;"></a></p>
                                            <div class="select-style width65 ">
                                                <select
                                                        ng-options="x as x.operatorName for x in operators track by x.airtimeOperatorId"
                                                        ng-change="updateOperator(selectedOperator)"
                                                        ng-model="selectedOperator" placeholder="Select"
                                                        class="ng-pristine ng-valid ng-touched">
                                                    <option value="" disabled="" selected="selected"> Select</option>
                                                </select>
                                            </div>
                                            <p class="invalidtext ng-binding"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 col-md-6 col-xs-12">
                                        <div class="form-group ng-hide" ng-show="isAgreed == false">
                                            <br>
                                            <input type="checkbox" id="checkboxG7" ng-model="checked1"
                                                   class="css-checkbox ng-pristine ng-untouched ng-valid">
                                            <label for="checkboxG7" class="css-label privacy signuptext"> I have read and agreed to the <a class="link"
                                                   href="https://uat.singx.co/singx/719be3430b91/Policy.html"
                                                   target="_blank">Privacy Policy</a> and <a class="link"
                                                   href="https://uat.singx.co/singx/MobileTopups/Terms"
                                                   target="_blank">Terms and Conditions</a>
                                            </label>
                                            <p class="invalidtext ng-binding"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 col-md-6 col-xs-12">
                                        <div class="form-group ">
                                            <br>
                                            <button class="btn btn-primary submitButton" type="submit"
                                                    ng-click="selectPlan()"> Proceed </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <br>
                            <h3>Recent Bill Payments</h3>
                            <table class="table">
                                <tr>
                                    <td>
                                        <div>DD/MM/YYYY</div>
                                    </td>
                                    <td>
                                        <div>Country</div>
                                    </td>
                                    <td>
                                        <div>Billing Category</div>
                                    </td>
                                    <td>
                                        <div>Operator Name</div>
                                    </td>
                                    <td>
                                        <div>Amount</div>
                                    </td>
                                    <td>
                                        <div><button class="btn btn-primary">Pay Again</button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>DD/MM/YYYY</div>
                                    </td>
                                    <td>
                                        <div>Country</div>
                                    </td>
                                    <td>
                                        <div>Billing Category</div>
                                    </td>
                                    <td>
                                        <div>Operator Name</div>
                                    </td>
                                    <td>
                                        <div>Amount</div>
                                    </td>
                                    <td>
                                        <div><button class="btn btn-primary">Pay Again</button>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>